<div class="default-background">
    <div style="display: flex; justify-content: space-between; margin-top: 16px;">
        <div>
            <div style="font-size: 32px; margin: 8px 0px 16px 0px; font-weight: 700; line-height: 32px;">
                {{'SECURITY_PROFILE_DASHBOARD'|translate}}
            </div>
            <div style="margin: 0px 0px 16px 0px; color: #545968; font-size: 14px;">{{'CREATE_ENDPOINT_SUB'|translate}}
            </div>
        </div>
        <button mat-raised-button color="primary" (click)="createNewEndpoint()" style="height: 36px;"
            *ngIf="permissionHelper.extractResult(permissionHelper.canDo(projectId, httpSvc.currentUserAuthInfo.permissionIds,'API_MGMT')) |async">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <mat-icon>add</mat-icon>
                <div>{{'ADD_API'|translate}}</div>
            </div>
        </button>
    </div>
    <ng-container *ngIf="permissionHelper.extractResult(permissionHelper.canDo(projectId, httpSvc.currentUserAuthInfo.permissionIds,'API_MGMT')) |async">

        <app-search (search)="doSearch($event)" [searchConfigs]="searchConfigs" [emitEvent]="false">
        </app-search>
        <div>
            <div class="table-container">
                <table mat-table [dataSource]="tableSource.dataSource">
                    <ng-container matColumnDef="id">
                        <th mat-header-cell *matHeaderCellDef> {{tableSource.columnConfig['id']|translate}} </th>
                        <td mat-cell *matCellDef="let row">
                            <app-copy-field [inputValue]="row.id"></app-copy-field>
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="resourceId">
                        <th mat-header-cell *matHeaderCellDef> {{tableSource.columnConfig['resourceId']|translate}} </th>
                        <td mat-cell *matCellDef="let row">
                            <app-editable-page-select-single [inputValue]="getOption(row)" [readOnly]="true">
                            </app-editable-page-select-single>
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="name">
                        <th mat-header-cell *matHeaderCellDef> {{tableSource.columnConfig['name']|translate}} </th>
                        <td mat-cell *matCellDef="let row">
                            {{row.name}}
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="path">
                        <th mat-header-cell *matHeaderCellDef> URL </th>
                        <td mat-cell *matCellDef="let row">
                            {{row.path}}
                        </td>
                    </ng-container>


                    <ng-container matColumnDef="method">
                        <th mat-header-cell *matHeaderCellDef> {{tableSource.columnConfig['method']|translate}} </th>
                        <td mat-cell *matCellDef="let row">
                            <ng-container *ngIf="!row.websocket">
                                <app-editable-select-single [inputValue]="getHttpOption(row.method,httpMethodList)"
                                    [list]="httpMethodList" [readOnly]="true">
                                </app-editable-select-single>
                            </ng-container>
                            <ng-container *ngIf="row.websocket">
                                <span style="margin-left: 16px;">N/A</span>
                            </ng-container>
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="edit">
                        <th mat-header-cell *matHeaderCellDef class="table-icon">{{tableSource.columnConfig['edit']|translate}}</th>
                        <td mat-cell *matCellDef="let row" class="table-icon">
                            <mat-icon (click)="editEndpoint(row.id)" [color]="'primary'">edit</mat-icon>
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="delete">
                        <th mat-header-cell *matHeaderCellDef class="table-icon">{{tableSource.columnConfig['delete']|translate}}</th>
                        <td mat-cell *matCellDef="let row" class="table-icon">
                            <mat-icon (click)="doDelete(row.id)" [color]="'warn'">delete_outline</mat-icon>
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="expire">
                        <th mat-header-cell *matHeaderCellDef class="table-icon">{{tableSource.columnConfig['expire']|translate}}</th>
                        <td mat-cell *matCellDef="let row" class="table-icon">
                            <ng-container *ngIf="row.shared">
                                <mat-icon *ngIf="!row.expired" (click)="doExpireById(row.id)" [color]="'warn'"
                                    matTooltip="{{row.expireReason}}">remove</mat-icon>
                                <mat-icon *ngIf="row.expired" (click)="doExpireById(row.id)" [color]="'warn'"
                                    matTooltip="{{row.expireReason}}">done</mat-icon>
                            </ng-container>
                            <ng-container *ngIf="!row.shared">
                                N/A
                            </ng-container>
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="expireReason">
                        <th mat-header-cell *matHeaderCellDef class="table-icon">
                            {{tableSource.columnConfig['expireReason']|translate}}
                        </th>
                        <td mat-cell *matCellDef="let row" class="table-icon">

                            <ng-container *ngIf="row.expired">
                                {{row.expireReason}}
                            </ng-container>
                            <ng-container *ngIf="!row.shared">
                                N/A
                            </ng-container>

                        </td>
                    </ng-container>
                    <ng-container matColumnDef="report">
                        <th mat-header-cell *matHeaderCellDef class="table-icon">{{tableSource.columnConfig['report']|translate}}</th>
                        <td mat-cell *matCellDef="let row" class="table-icon">
                            <mat-icon (click)="viewReport(row.id)" [color]="'primary'">summarize</mat-icon>
                        </td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="tableSource.displayedColumns(); sticky: true"></tr>
                    <tr mat-row *matRowDef="let row; columns: tableSource.displayedColumns();"></tr>
                </table>
            </div>

            <mat-paginator [showFirstLastButtons]="true" [length]="tableSource.totoalItemCount" [pageIndex]="tableSource.pageNum"
            [pageSize]="tableSource.pageSize" (page)="tableSource.loadPage($event.pageIndex)">
        </mat-paginator>
        </div>
    </ng-container>
</div>